import msgIcon from '@/assets/layout/msg.png';
import emptyMessage from '@/assets/message/emptyMessage.png';
import message1 from '@/assets/message/message1.png';
import message2 from '@/assets/message/message2.png';
import message3 from '@/assets/message/message3.png';
import message4 from '@/assets/message/message4.png';
import message5 from '@/assets/message/message5.png';
import message6 from '@/assets/message/message6.png';
import message7 from '@/assets/message/message7.png';
import { history } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Badge, Divider, Popconfirm } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

const MESSAGE_TYPE = {} as any;
const readMessages: any = () => {};
const getMessageList: any = () => {};
const MessagePopconfirm = (props: any) => {
  const [messageList, setMessageList] = useState<any[]>([]);
  const [messageCount, setMessageCount] = useState(0);
  // const dispatch = useDispatch();

  useEffect(() => {
    getMessage();
  }, [props?.isRefreshMessage]);
  const { run } = useRequest(
    async () => {
      // const res = await getMessageList({
      //   type: 'MESSAGE_NOTIFY',
      //   pageNo: 1,
      //   pageSize: 4,
      //   status: 'UNREAD',
      // });
      // if (res.code === 200) {
      //   setMessageList(res?.data?.messageCenterListVO?.records); // 只显示前4条
      //   setMessageCount(res?.data?.unReadCount || 0);
      // }
      const res = {
        data: {
          unReadCount: 0,
          messageCenterListVO: {
            records: [],
          },
        },
      };
      return res;
    },
    {
      manual: true,
      pollingInterval: 5000,
    },
  );
  const getMessage = async () => {
    if (!props.isRefreshMessage) {
      return;
    }
    run();
    // dispatch({
    //   type: 'messageCenter/changeIsRefreshMessage',
    //   payload: {
    //     isRefreshMessage: false,
    //   },
    // });
  };
  const handleRead = async (el: any) => {
    await readMessages({
      id: el.id,
      isAll: 2,
    });
    history.replace(`${MESSAGE_TYPE[el?.source]?.path}?id=${el?.id}`, {
      id: el?.id,
    });
    window.location.reload();
  };
  useEffect(() => {
    run();
  }, []);
  const getImg = (type: string) => {
    switch (type) {
      case 'VERIFICATION_MANAGEMENT':
        return message1; // 凭证管理
      case 'PUBLISH_MANAGEMENT':
        return message2; // 发布管理
      case 'MY_PROBE':
        return message3; // 我探查的
      case 'PRODUCT_MANAGEMENT':
        return message4; // 上架产品管理
      case 'ORDER_MANAGEMENT':
        return message5; // 订单管理
      case 'CONTRACT_MANAGEMENT':
        return message6; // 合同管理
      case 'DELIVERY_MANAGEMENT':
        return message7; // 交付管理
      default:
        return '';
    }
  };
  const Content = () => {
    return (
      <div className={styles.messageContent}>
        {
          <div className={styles.title}>
            消息通知{messageCount > 0 && `（${messageCount}）`}
          </div>
        }
        <Divider style={{ margin: '10px 0' }} />
        <div className={styles.list}>
          {messageList?.map((el: any) => {
            return <Item el={el} />;
          })}
        </div>
        {/* 空状态 */}
        {messageList?.length <= 0 && (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: '10px',
              color: '#B7B7B7',
              gap: '5px',
            }}
          >
            <img
              src={emptyMessage}
              style={{ width: '21px', height: '21px' }}
              alt=""
            />
            暂无未读消息
          </div>
        )}
        <Divider style={{ margin: '10px 0 15px 0' }} />
        <div
          className={styles.more}
          onClick={() => {
            history.push('/idenmanagement/message', { tab: 'notice' });
          }}
        >
          查看更多
        </div>
      </div>
    );
  };
  const Item = ({ el }: any) => {
    return (
      <div className={styles.item} onClick={() => handleRead(el)}>
        <div className={styles.itemLf}>
          <div
            className={styles.itemPoint}
            style={{ visibility: el.isRead ? 'hidden' : 'visible' }}
          />
          <img className={styles.itemImg} src={getImg(el.source)} />
        </div>
        <div className={styles.itemRg}>
          <div className={styles.itemTitle}>
            <div
              className={styles.itemTitleLf}
              style={{ color: el?.isRead ? '#B7B7B7' : '#121212' }}
            >
              {MESSAGE_TYPE[el.source]?.label}
            </div>
            <div
              className={styles.itemTitleRg}
              // style={{ color: el?.isRead ? '#B7B7B7' : '#595959' }}
            >
              {el?.sendTime}
            </div>
          </div>
          <div
            className={styles.itemContent}
            style={{ color: el?.isRead ? '#B7B7B7' : '#595959' }}
          >
            {el?.content}
          </div>
        </div>
      </div>
    );
  };

  return (
    <Popconfirm
      placement="bottom"
      title={null}
      description={<Content />}
      showCancel={false}
      okButtonProps={{ style: { display: 'none' } }}
      overlayClassName={styles.mypopconfirm}
      icon={null}
      trigger={['hover']}
      onOpenChange={(open) => {
        if (open) {
          run();
        }
      }}
    >
      <div className="flex items-center">
        <Badge
          count={messageCount}
          offset={[-5, 3]}
          color="#EB5757"
          className={styles.badge}
        >
          <img
            src={msgIcon}
            className="w-[22px] h-[22px] mt-[2px] cursor-pointer"
          />
        </Badge>
      </div>
    </Popconfirm>
  );
};

export default MessagePopconfirm;
// export default connect(({ messageCenter }) => ({
//   ...messageCenter,
// }))(MessagePopconfirm);
